<template>
  <div class="model-main">
    <a-card class="model-main-right" :bordered="false" :bodyStyle="bodyStyle">
      <div class="c-table" v-if="isTable">
        <z-table
          ref="table"
          rowKey="phone"
          :showAlert="false"
          :showSelection="false"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          :rowClassName="rowClassName"
          @rowClick="onRowClick"
          @change="onTableChange"
        >
        </z-table>
      </div>
      <slot></slot>
    </a-card>
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
export default {
  props: {
    // 是否加载目标人员表格
    isTable: {
      type: Boolean,
      default: true
    },
    bodyStyle: {
      type: Object
    }
  },
  name: 'taskContainer',
  data() {
    return {
      loading: false,
      modelId: null,
      queryTaskId: null,
      selectKey: null,
      form: {},
      columns1: [
        {
          title: '序号', width: 60, align: 'center', dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '手机号', dataIndex: 'phone', width: 130, align: 'center', },
        { title: '姓名/代号', dataIndex: 'name', width: 100, align: 'center' },
        { title: '更新时间', dataIndex: 'updateTime', width: 150, align: 'center', customRender: text => { return text?this.$options.filters.dayjs(text):'--' } }
      ],
      columns2: [
        {
          title: '序号', width: 60, align: 'center', dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        { title: '代号', dataIndex: 'name', width: 60, align: 'center' },
        { title: '手机号', dataIndex: 'phone', width: 70, align: 'center' },
        { title: '归属地', dataIndex: 'placeOwnership', width: 70, align: 'center' },
        { title: '团伙人数', dataIndex: 'gangsNumber', width: 80, align: 'center' },
        { title: '更新时间', dataIndex: 'updateTime', width: 80, align: 'center', customRender: text => { return text?this.$options.filters.dayjs(text):'--' } }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  created() {
    this.getRouteQuery(this.$route)
  },
  computed: {
    columns() {
      let columns = this.modelId==5?this.columns2: this.columns1
      return columns
    }
  },
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    },
    queryTaskId() {
      this.refreshTable()
    }
  },
  methods: {
    // 表格选中class
    rowClassName(record, index) {
      let className = ''
      if (record.phone === this.selectKey) className = 'row-selected'
      return className
    },
    // 点击表格
    onRowClick(keys) {
      console.log(keys)
      this.selectKey = keys && Object.keys(keys).length > 0 && keys.phone ? keys.phone : null
      let item = Object.assign({}, keys)
      if(!item.hasOwnProperty('taskId')) {
        this.$set(item, 'taskId', this.queryTaskId)
      }
      this.$emit('selectItemClick', item)
    },
    // 获取目标对象列表
    refreshTable() {
      this.$set(this.form, 'taskId', this.queryTaskId)
      // this.$set(this.form, 'modelId', this.modelId)
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      let api = null
      if(this.modelId==3) {
        api = alarmServiceApi.getPortraitUserList(form)
      } else if(this.modelId==4) {
        api = alarmServiceApi.getCommonRecordList(form)
      } else if(this.modelId==5) {
        api = alarmServiceApi.getGangRelationsList(form)
      }
      if(!api) return
        api.then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            // 默认点击第一条记录
            if (this.pageData && Object.keys(this.pageData).length > 0 && this.pageData.total > 0) {
              this.onRowClick(this.pageData.records[0])
            }
            this.$emit('pageDatas', this.pageData)
          } else {
            this.$message.warn(res.message?res.message:'请求失败')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.query && Object.keys($route.query).length > 0) {
        let query = $route.query
        if (query.modelId) {
          this.modelId = query.modelId
        }
        if (query.taskId) {
          this.queryTaskId = query.taskId
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.model-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.model-main-left {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  margin-right: 12px;
  background-color: #fff;
  padding: 12px;
}
.model-main-right {
  flex: 1;
  min-height: 600px;
  /deep/.ant-card-body {
    display: flex;
    > * {
      flex: 1;
      margin-right: 20px;
      width: 0;
      &.c-table {
        flex: 0.8;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
/deep/.ant-menu-vertical {
  border-right-width: 0;
}
/deep/.row-selected {
  background-color: #e6f7ff;
}
/deep/.ant-table-row {
  cursor: pointer;
}

//
/deep/.row-selected {
  background-color: #e6f7ff;
}
/deep/.ant-table-row {
  cursor: pointer;
}
/deep/.ant-table-thead > tr > th,
/deep/.ant-table-tbody > tr > td {
  padding-left: 0;
  padding-right: 0;
}
</style>
